<script setup lang="ts">
  import { useRouter } from 'vue-router'; 
  import { ref, onMounted } from 'vue'
  const router = useRouter();
  const goBack = () => {
    router.go(-1);
  };
  const showProgress = () => {
    router.push({ name: 'order_progress' });
  };
  // 模拟数据
  const tableData = ref([
    {
      id: '001',
      goods_name: '商品A',
      num: 5,
      price: 120.00, // 单价
      tax_rate: '6%',
      total_price: 600.00 // 总价
    },
    {
      id: '002',
      goods_name: '商品B',
      num: 3,
      price: 250.00,
      tax_rate: '8%',
      total_price: 750.00
    },
  ]);
  const radio1 = ref('1');
</script>

<template>
  <div class="order-detail">
    <el-page-header title="返回" @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3"> 订单详情 </span>
      </template>
      <template #extra>
        <div @click="showProgress" class="text-small-div">
          <span class="text-small">查看进度</span>
          <img class="img-jr" src="@/assets/commons/jr.png" alt="">
        </div>
      </template>
    </el-page-header>
    <div style="margin-top: 20px;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="goods_name" label="商品" width="200" />
        <el-table-column prop="num" label="数量" width="200" />
        <el-table-column prop="price" label="单价" width="200">
          <template #default="scope">
            <span style="color: #1570EF;">{{scope.row.total_price}}</span><span style="color: #FD7401;">￥</span>
          </template>
        </el-table-column>
        <el-table-column prop="tax_rate" label="税率" width="200" />
        <el-table-column prop="total_price" label="总价" width="200">
          <template #default="scope">
            <span style="color: #1570EF;">{{scope.row.total_price}}</span><span style="color: #FD7401;">￥</span>
          </template>
        </el-table-column>

      </el-table>

    </div>
    <h4>订单类型</h4>
    <div>
      <el-radio-group v-model="radio1">
        <el-radio value="1" size="large" border>配送</el-radio>
        <el-radio value="2" size="large" border disabled>到店取货</el-radio>
        <el-radio value="3" size="large" border disabled>现付</el-radio>
      </el-radio-group>
    </div>
    <div class="order-info" style="margin-top: 20px;">
      <div class="order-info-left">
        <el-descriptions title="收货信息">
          <el-descriptions-item label="公司地址" >收银系统公司</el-descriptions-item>
          <el-descriptions-item label="收货人">测试</el-descriptions-item>
          <el-descriptions-item label="联系方式" >33625823391</el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-tag size="small">School</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="order-info-right">
        <el-descriptions title="订单信息"></el-descriptions>
        <div class="order-info-right-item">
          <div class="order-info-right-item-left">配送费</div>
          <div class="order-info-right-item-right">0.00 <span class="order-info-right-item-right-unit">￥</span></div>
        </div>
        <div class="order-info-right-item">
          <div class="order-info-right-item-left">服务费</div>
          <div class="order-info-right-item-right">0.00 <span class="order-info-right-item-right-unit">￥</span></div>
        </div>
        <div class="order-info-right-item">
          <div class="order-info-right-item-left">订单减免</div>
          <div class="order-info-right-item-right">0.00 <span class="order-info-right-item-right-unit">￥</span></div>
        </div>
        <div class="order-info-right-item">
          <div class="order-info-right-item-left">减免</div>
          <div class="order-info-right-item-right">0.00 <span class="order-info-right-item-right-unit">￥</span></div>
        </div>
        <div class="order-info-right-item">
          <div class="order-info-right-item-left">总价</div>
          <div class="order-info-right-item-right">0.00 <span class="order-info-right-item-right-unit">￥</span></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .order-detail {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    padding: 20px;
    box-sizing: border-box;
  }
  .text-small-div {
    display: flex;
    align-items: center;
  }
  .img-jr {
    width: 18px;
    height: 18px;
    margin-left: 5px;
  }
  .order-info {
    display: flex;
    justify-content: space-between;
  }
  .order-info-left {
    width: 50%;
  }
  .order-info-right {
    width: 50%;
  }
  .order-info-right-item {
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .order-info-right-item-right {
    color: #1570EF;
  }
  .order-info-right-item-right-unit {
    color: #FD7401;
  }
</style>